<template>
  <div class="nav">
    <div class="left"><img src="../logo_app.png" alt=""></div>
    <el-menu :default-active="activeIndex" class="el-menu-demo center" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="goProduct(2128)">手机专区</el-menu-item>
      <el-menu-item index="2" @click="goProduct(2129)">电脑</el-menu-item>
      <el-menu-item index="3" @click="goProduct(2130)">平板</el-menu-item>
      <el-menu-item index="4" @click="goProOne(2131)">穿戴</el-menu-item>
      <el-menu-item index="5" @click="goProOne(2177)">智慧屏</el-menu-item>
      <el-menu-item index="6">服务中心</el-menu-item>
      <el-menu-item index="7" @click="goMyOrder">订单管理</el-menu-item>
    </el-menu>
    <div class="right">
      <i @click="search(searchWord)" class="el-icon-search"></i>
      <input @keydown.enter="search(searchWord)" type="search" placeholder="搜索商品" v-model="searchWord">
    </div>

  </div>
</template>

<script>
import { getSearch } from "@/assets/request.js"
export default {
  name: "Navbar",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      // 搜索词
      searchWord: '',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 跳转到平板产品页面
    goProduct(id) {
      this.$router.push({
        name: "product",
        params: {
          id,
        }
      })
    },
    // 跳转到穿戴产品页面
    goProOne(id) {
      this.$router.push({
        name: "proOne",
        params: {
          id,
        }
      })
    },
    // 去订单页
    goMyOrder() {
      this.$router.push({
        name: "myorder",
      })
    },
    // 搜索商品
    async search(word) {
      // let searchgoods = [];
      let getsearch = await getSearch(word)
      // console.log(word);
      console.log(getsearch);
      let searchgoods = getsearch.data.result.rows;
      sessionStorage.setItem("searchgoods",JSON.stringify(searchgoods))
        // 跳转到搜索的产品页面
        this.$router.push({
          name: "search",
          // params: {
          //   data: searchgoods,
          // }
        })
    },

  }
}


</script>

<style lang='scss' scoped>
@function vw($w) {
  @return ($w/1349) * 100+vw;
}

.nav {
  // position: fixed;
  // top:0;
  width: 100%;
  height: vw(75);
  background-color: #fff;
  display: flex;
  justify-content: space-between;

  .left {
    margin-left: vw(75);

    img {
      width: vw(100);
      height: 100%;
    }
  }

  .center {
    height: 100%;

    ul {
      display: flex;
      color: #000;

      li {
        padding: 0 vw(16);
        font-size: vw(18);
        line-height: vw(75);
      }
    }
  }

  .right {
    margin-right: vw(75);
    line-height: vw(75);
    position: relative;

    input {
      height: vw(30);
      padding-left: vw(26);
      border: 1px solid rgb(179, 174, 174);
    }

    i {
      color: rgb(179, 174, 174);
      font-size: vw(16);
      position: absolute;
      top: 38%;
      left: vw(6);

      &:hover {
        color: #000;
      }
    }
  }
}
</style>
